<template>
  <uni-nav-bar title="新建车用尿素外卖单" left-icon="left" @clickLeft="navBack" :fixed="false" statusBar></uni-nav-bar>
  <view class="package" style="font-size: 30rpx;">
    <view class="space-between">
      <view>姓名</view>
      <input class="uni-input" placeholder="请输入车友姓名" v-model="name" />
    </view>
    <view class="space-between Top">
      <view>预约时间段</view>
      <uni-datetime-picker
        v-model="datetimerange"
        type="datetimerange"
        rangeSeparator="至"
        @change="dateRange"
        :hide-second="true"
        :start-placeholder="'2023-2-26'"
      >
        <view :style="{ color: indicate ? '#333' : '#888', textAlign: 'right', width: '100%' }">
          {{ indicate ? indicate : '请选择加注时间' }}
        </view>
      </uni-datetime-picker>
    </view>
    <view class="space-between Top" @click="() => (isShowPlateKeyboard = true)">
      <view>车牌号</view>
      <text :style="{ color: numberplate ? '#333' : '#808080' }">{{ numberplate ? numberplate : '请输入车牌号' }}</text>
    </view>
    <view class="space-between Top">
      <view style="width: 90px;">加注地址</view>
      <view @click="chooseLocation()" class="flex-end">
        <view :style="{ color: Locposition ? '#333' : '#888',width:'85%' }">
          {{ Locposition ? Locposition : '请录入驻车地址' }}
        </view>
        <uni-icons type="location-filled" color="#999" size="24"></uni-icons>
      </view>
    </view>
    <view class="space-between Top" style="align-items: flex-start;">
      <view style="width: 90px;">详细地址</view>
      <view>
        <textarea
          placeholder="请输入驻车详细地址"
          v-model="Detailed"
          placeholder-style="color: #888;font-size: 29rpx"
          auto-height
          class="detail-textarea"
        ></textarea>
      </view>
    </view>
  </view>
  <view class="but" @click="sub()">发起车用尿素外卖单</view>
  <!-- 获取当前经纬度 -->
  <Lotlats @position="position"></Lotlats>
  <!-- 汽车车牌 -->
  <VehiclePlatePad v-if="isShowPlateKeyboard" @cancel="isShowPlateKeyboard = false" @confirm="addPlate" />
  <view v-if="curPage === 'map'"><web-view :src="mapURI"></web-view></view>
</template>

<script setup lang="ts">
import { navBack, redirectTo } from '@/utils/navigator';
import Lotlats from '@c/team/Lotlat.vue';
import { errorToast, showLoading, successToast } from '@/utils/prompt';
import { toPublish } from '@mqtt';
import { Ref, ref } from 'vue';
import VehiclePlatePad from '@/components/common/VehiclePlatePads.vue';
import { getDriverID } from '@/stores/driverID';
const plug_id = getDriverID();
const isShowPlateKeyboard = ref(false); //车牌弹框
const name = ref(''); //姓名
const numberplate = ref(''); //车牌号
const datetimerange = ref(); //时间
const indicate = ref('');//时间显示

const Locposition = ref('');//标题地址
const Detailed = ref('');//详细地址

const repeat=ref(false)//防止重复点击

// 更改地址
let longitude = 0; //纬度
let latitude = 0; //经度
const lat = ref();
const lon = ref();
const addrLocation = ref('');
const curPage: Ref<'form' | 'map'> = ref('form');
const mapURI = ref('');
/**
 * @param {Object} plateNum 车牌
 */
function addPlate(plateNum) {
  isShowPlateKeyboard.value = false;
  numberplate.value = plateNum;
}
/**
 * @param {Object} e 下次预约时间段
 */
function dateRange(e) {
  datetimerange.value = e;
  const star = e[0].slice(5);
  const end = e[1].slice(5);
  indicate.value = star + ' 至 ' + end;
}
/**
 * 获取当前城市信息
 * @param {Object} lat 当前位置的纬度
 * @param {Object} lot 当前位置的经度
 */
function position(lat, lot) {
  console.log(lat, lot);
  longitude = lot;
  latitude = lat;
}
/**
 * 获取当前位置的地址列表
 */
function chooseLocation() {
  mapURI.value = `https://apis.map.qq.com/tools/locpicker?coord=${latitude},${longitude}&search=1&type=1&key=URFBZ-F4TKI-SLPGX-57GMO-ZHYM6-BCFSL&referer=安蓝环保`;
  curPage.value = 'map';
  function msgListener(event) {
    // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
    const data = event.data;
    console.log(data);
    if (data && data.module == 'locationPicker') {
      //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
      // location.value = `${data.poiaddress}-${data.poiname}`;
      lon.value = Number(data.latlng.lng);
      lat.value = Number(data.latlng.lat);
      addrLocation.value = data.poiaddress;
      Detailed.value = data.poiaddress;
      Locposition.value = data.poiname;
      curPage.value = 'form';
      window.removeEventListener('message', msgListener);
    }
  }
  window.addEventListener('message', msgListener, false);
}
/**
 * 提交
 */
function sub() {
  showLoading('正在提交');
  if(repeat.value){
    return
  }
  repeat.value=true
  const starttime=datetimerange.value?datetimerange.value[0]:''
  const endtime=datetimerange.value?datetimerange.value[1]:''
  const payload = {
        plug_id,
        name:name.value,
        starttime,
        endtime,
        longitude:lon.value,
        latitude:lat.value,
        locposition:Locposition.value,
        detailed:Detailed.value,
        cart_code:numberplate.value
  };
  console.log(payload)
  toPublish('plug/addLog', payload, (obj: any) => {
    uni.hideLoading();
    const { code,data,msg } = obj;
    if (code===1) {
      successToast('提交成功')
      redirectTo('Sale/shareTake?name=' + name.value+'&id='+data);
      repeat.value=false
    } else {
      errorToast(msg)
      repeat.value=false
    }
  });
}
</script>

<style scoped lang="less">
.Top {
  margin-top: 30rpx;
}
.package {
  input {
    text-align: right;
  }
}
.but {
  width: 246px;
  height: 42px;
  background: #1b91ff;
  box-shadow: 1px 2px 4px 0px rgba(204, 204, 204, 0.5);
  border-radius: 5px;
  font-size: 18px;
  color: #ffffff;
  text-align: center;
  line-height: 42px;
  margin: 5% auto;
}
.detail-textarea {
  text-align: right;
}
</style>
